<template>
	<div class="w-full">
		<div class="flex items-center absolute top-0 left-0 text-14px cursor-pointer" @click="back">
			<el-icon>
				<ArrowLeft />
			</el-icon>
			<p>
				返回
			</p>
		</div>
		<div class="w-full flex items-center justify-center">
			<div class="w-40%">
				<p class="text-18px text-#000000">身份证人像面</p>
				<div class="w-full h-260px flex items-center justify-center relative mt-20px">
					<el-upload class="upload-person" drag action="#" ref="uploadRefFile1" :on-preview="handlePreview"
						:on-remove="handleRemove" :on-success="handleSuccess" :file-list="fileList1" :auto-upload="false"
						:on-change="handleChange1" :accept="'image/jpeg,image/png,image/jpg'" :before-upload="beforeUpload"
						:limit="1" :on-exceed="handleExceedFile1" :show-file-list="false">
						<div class="el-upload__text hidden">去上传</div>
					</el-upload>
					<div @click="uploadFile1" class="absolute w-90px h-40px rounded-8px
					bg-#114CEE flex items-center justify-center text-#FFFFFF text-14px cursor-pointer
					z-100">
						去上传
					</div>

					<div v-if="dialogVisible" class="absolute w-98% h-98% rounded-4px">
						<img :src="previewUrl" class="w-full h-full rounded-4px">
						<div class="absolute right-10px top-10px z-100">
							<el-icon color="#fff" size="18px"
							@click="removeFile1">
								<CloseBold />
							</el-icon>
						</div>
					</div>
				</div>

				<p class="text-18px text-#000000 mt-40px">身份证国徽面</p>
				<div class="w-full h-260px flex items-center justify-center relative mt-20px">
					<el-upload class="upload-person" drag action="#" ref="uploadRefFile2" :on-preview="handlePreview"
						:on-remove="handleRemove" :on-success="handleSuccess" :file-list="fileList2" :auto-upload="false"
						:on-change="handleChange2" :accept="'image/jpeg,image/png,image/jpg'" 
						:before-upload="beforeUpload"
						:limit="1" :on-exceed="handleExceedFile2" :show-file-list="false">
						<div class="el-upload__text hidden">去上传</div>
					</el-upload>
					<div @click="uploadFile2" class="absolute w-90px h-40px rounded-8px
					bg-#114CEE flex items-center justify-center text-#FFFFFF text-14px cursor-pointer
					z-100">
						去上传
					</div>

					<div v-if="dialogVisible2" class="absolute w-98% h-98% rounded-4px">
						<img :src="previewUrl2" class="w-full h-full rounded-4px">
						<div class="absolute right-10px top-10px z-100">
							<el-icon color="#fff" size="18px"
							@click="removeFile2">
								<CloseBold />
							</el-icon>
						</div>
					</div>
				</div>
				<p class="text-14px text-[#000] mt-20px">文件只能是jpg/jpeg/png档案且大小必须在10KB到5120KB之间。档案格式。</p>
				<div class="mt-60px">
					<el-button color="#114CEE" style="width: 100%;height:50px;font-size: 18px;" @click="next">继续</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import type { UploadFile } from 'element-plus';

const emits = defineEmits(['back', 'next'])

const next = () => {
	emits('next')
}

const back = () => {
	emits('back')
}

const fileList1 = ref<any[]>([])
const fileList2 = ref<any[]>([])
const previewUrl = ref<any>('')
const previewUrl2 = ref<any>('')
const dialogVisible = ref<boolean>(false);
const dialogVisible2 = ref<boolean>(false);
const uploadRefFile1 = ref<any>();
const uploadRefFile2 = ref<any>();
const beforeUpload = (file: any) => {
	const isLt5M: any = file.size / 1024 / 1024 < 5.12;
	if (!isLt5M) {
		ElMessage.error('文件大小必须小于 5MB!');
	}
	return isLt5M;
};
const handleChange1 = (file: UploadFile, fileList: UploadFile[]) => {
	console.log('Change:', file, fileList);
	const data = file.raw
	if (data) {
		// 更新预览URL
		previewUrl.value = window.URL.createObjectURL(data);
		console.log(previewUrl.value)
		// 显示预览对话框
		dialogVisible.value = true;
	}

};
const handleChange2 = (file: UploadFile, fileList: UploadFile[]) => {
	console.log('Change:', file, fileList);
	const data = file.raw
	if (data) {
		// 更新预览URL
		previewUrl2.value = window.URL.createObjectURL(data);
		// 显示预览对话框
		dialogVisible2.value = true;
	}

};
const handleSuccess = (response: any, file: any, fileList: any[]) => {
	console.log('Success:', response, file, fileList);
};

const handlePreview = (file: any) => {
	console.log('Preview:', file);
};

const handleRemove = (file: UploadFile, fileList: UploadFile[]) => {
	console.log('Remove:', file, fileList);
};

const handleExceedFile1 = (files: any[], uploadFiles: any[]) => {
	fileList1.value = [];
	fileList1.value.push(...files);
	const data = fileList1.value[0]
	if (data) {
		// 更新预览URL
		previewUrl.value = window.URL.createObjectURL(data);
		console.log(previewUrl.value)

		// 显示预览对话框
		dialogVisible.value = true;
	}
};
const handleExceedFile2 = (files: any[], uploadFiles: any[]) => {
	fileList2.value = [];
	fileList2.value.push(...files);
	const data = fileList2.value[0]
	if (data) {
		// 更新预览URL
		previewUrl2.value = window.URL.createObjectURL(data);
		// 显示预览对话框
		dialogVisible2.value = true;
	}
};

const uploadFile1 = () => {
	uploadRefFile1.value.$el.querySelector('.el-upload__input').click()
}
const uploadFile2 = () => {
	uploadRefFile2.value.$el.querySelector('.el-upload__input').click()
}


const removeFile1 = () => {
	fileList1.value = [];
	previewUrl.value = '';
	dialogVisible.value = false;
};

const removeFile2 = () => {
	fileList2.value = [];
	previewUrl2.value = '';
	dialogVisible2.value = false;
};
</script>
<style lang="scss" scoped>
::v-deep .el-upload {
	height: 100%;

}

::v-deep .el-upload-dragger {
	height: 100%;
	border-style: solid;
}
</style>
<style scoped>
.upload-person {
	width: 100%;
	height: 100%;
}
</style>
